import { BasicColumn, FormSchema } from '@/components/Table';
import { DescItem } from '@/components/Description';
import { h } from 'vue';
import { Image } from 'ant-design-vue';
import { Tag } from 'ant-design-vue';
import { listSelectStoreApi } from '@/api/custom/StoreApi';

/**
 * 表格列
 */
export const columns: BasicColumn[] = [
  {
    title: '名称',
    dataIndex: 'name',
    width: 80,
  },
  {
    title: '缩略图',
    dataIndex: 'thumbnail',
    width: 80,
    customRender: ({ record }) => {
      return h(Image, { src: record.thumbnail });
    },
  },
  {
    title: '适用人群',
    dataIndex: 'targetAudience',
    width: 80,
  },
  {
    title: '适用部位',
    dataIndex: 'bodyPart',
    width: 60,
  },
  {
    title: '服务时长',
    dataIndex: 'serviceDuration',
    width: 60,
  },

  {
    title: '现价',
    dataIndex: 'currentPrice',
    width: 80,
    customRender: ({ record }) => {
      return `￥${record.currentPrice} `;
    },
  },
  {
    title: '会员价',
    dataIndex: 'memberPrice',
    width: 80,
    customRender: ({ record }) => {
      return `￥${record.memberPrice} `;
    },
  },
  {
    title: '疗程价',
    dataIndex: 'coursePrice',
    width: 80,
    customRender: ({ record }) => {
      return `￥${record.coursePrice} `;
    },
  },
  {
    title: '原价',
    dataIndex: 'originalPrice',
    width: 80,
    customRender: ({ record }) => {
      return `￥${record.originalPrice} `;
    },
  },
  {
    title: '疗程次数',
    dataIndex: 'courseNumber',
    width: 60,
  },
  {
    title: '浏览次数',
    dataIndex: 'viewCount',
    width: 60,
  },
  {
    title: '累计销量',
    dataIndex: 'salesVolume',
    width: 60,
  },
  {
    title: '排序',
    dataIndex: 'sortOrder',
    width: 60,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 80,
    customRender: ({ record }) => {
      const value = record.status;
      let color, text;

      switch (value) {
        case 0:
          color = 'red';
          text = '下架';
          break;
        case 1:
          color = 'green';
          text = '正常';
          break;
      }
      return h(Tag, { color: color }, () => text);
    },
  },

  {
    title: '创建时间',
    dataIndex: 'createdAt',
    width: 80,
  },
];

/**
 * 查询条件
 */
export const queryFormSchema: FormSchema[] = [
  {
    field: 'storeId',
    label: '商户',
    component: 'ApiSelect',
    componentProps: {
      api: listSelectStoreApi,
      resultField: 'data',
      labelField: 'name',
      valueField: 'id',
    },
    colProps: { span: 6 },
  },
  {
    field: 'name',
    label: '项目名称',
    component: 'Input',
    componentProps: {},
    colProps: { span: 6 },
  },

  {
    field: 'status',
    label: '项目状态',
    colProps: { span: 6 },
    component: 'Select',
    // defaultValue: 0,
    componentProps: {
      options: [
        { label: '下架', value: 0 },
        { label: '正常', value: 1 },
      ],
    },
  },
];

/**
 * 查看详情表单
 */
export const retrieveDetailFormSchema: DescItem[] = [
  {
    field: 'name',
    label: '项目名称',
  },
  {
    field: 'thumbnail',
    label: '项目缩略图URL',
  },
  {
    field: 'targetAudience',
    label: '目标使用人群',
  },
  {
    field: 'bodyPart',
    label: '项目适用的身体部位',
  },
  {
    field: 'serviceDuration',
    label: '服务持续时长，如"90分钟"',
  },
  {
    field: 'detailDescription',
    label: '项目详细描述',
  },
  {
    field: 'currentPrice',
    label: '当前售价（分）',
  },
  {
    field: 'memberPrice',
    label: '会员专享价格（分）',
  },
  {
    field: 'coursePrice',
    label: '疗程套餐价格（分）',
  },
  {
    field: 'originalPrice',
    label: '商品原价（分）',
  },
  {
    field: 'viewCount',
    label: '项目页面浏览次数',
  },
  {
    field: 'salesVolume',
    label: '累计销售数量',
  },
  {
    field: 'sortOrder',
    label: '列表排序序号',
  },
  {
    field: 'status',
    label: '项目状态：0=禁用，1=启用',
  },
  {
    field: 'storeId',
    label: '所属店铺ID',
  },
  {
    field: 'createdAt',
    label: '创建时间',
  },
  {
    field: 'updatedAt',
    label: '更新时间',
  },
];

/**
 * 新增/编辑表单
 */
export const insertOrUpdateFormSchema: FormSchema[] = [
  {
    field: 'id',
    // 只是为了把ID带过来
    label: '主键ID',
    component: 'Render',
    ifShow: false,
  },
  {
    field: 'name',
    label: '项目名称',
    required: true,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'thumbnail',
    label: '缩略图',
    required: true,
    // component: 'Input',
    componentProps: {},
    slot: 'thumbnail',
  },
  {
    field: 'targetAudience',
    label: '适用人群',
    required: true,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'bodyPart',
    label: '适用部位',
    required: true,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'serviceDuration',
    label: '服务时长',
    required: true,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'detailDescription',
    label: '项目详情',
    required: true,
    // component: 'Input',

    componentProps: {},
    slot: 'detailDescription',
  },
  {
    field: 'currentPrice',
    label: '当前售价',
    required: true,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'memberPrice',
    label: '会员价格',
    required: true,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'coursePrice',
    label: '疗程价格',
    required: true,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'courseNumber',
    label: '疗程数量',
    required: true,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'originalPrice',
    label: '商品原价',
    required: true,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'viewCount',
    label: '浏览次数',
    required: false,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'salesVolume',
    label: '累计销量',
    required: false,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'sortOrder',
    label: '排序',
    required: false,
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'status',
    label: '状态',
    required: false,
    component: 'RadioButtonGroup',
    defaultValue: 0,
    componentProps: {
      options: [
        { label: '禁用', value: 0 },
        { label: '正常', value: 1 },
      ],
    },
  },
];
